<template>
    <div class="common-layout" style="background-color:honeydew">
        <el-container>
            <el-header class="header">
                <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                <span class="title">汪汪羊</span>
            </el-header>
            <el-main class="main">
                <el-col :span="100" v-for="cart in carts" :key="cart">
                    <el-card class="cart-card" :cartid="cart.cartid" style="margin-top: 10px">
                        <div class="left">
                            <el-image class="cart-picture" :src="`http://127.0.0.1:8081/product/${cart.product.picture}`"></el-image>
                        </div>
                            <div class="right">
                                <div>
                                    <el-text truncated>标题：{{cart.product.title}}</el-text>
                                </div>
                                <div>
                                    <el-text truncated>价格：{{cart.price}}</el-text>
                                </div>
                                <div>
                                   <el-text truncated>
                                       数量：x{{cart.number}}
                                   </el-text>
                                </div>
                                <div>
                                    <el-text truncated>总价：{{cart.total}}</el-text>
                                </div>
                            </div>
                            <div style="margin-left: 300px;margin-top: 130px">
                                <el-button @click="gm(cart.cartid)">支付</el-button>
                                <el-button @click="removeById(cart.cartid)">移出购物车</el-button>
                            </div>
                    </el-card>
                </el-col>
            </el-main>
            <el-dialog v-model="gmd" title="加入订单" width="50%" center>
                <el-form :model="gmForm" label-width="60">

                    <el-form-item>
                        价  格：<el-input v-model="gmForm.price" style="width: 300px" readonly="readonly"/>
                    </el-form-item>
                    <el-form-item>
                        <!--                                数量：<el-input v-model="gmForm.number" placeholder="title" style="width: 300px"/>-->
                        数量：<el-slider style="width:300px" v-model="sl" show-input @change="sum"/>
                    </el-form-item>
                    <el-form-item>
                        总  价：<el-input v-model="gmForm.total" style="width: 300px"/>
                        <!--                                <el-button @click="sum"></el-button>-->
                    </el-form-item>
                    <el-form-item>
                        地  址：<el-input v-model="gmForm.address" style="width: 300px"/>
                    </el-form-item>
                    <el-form-item>
                        姓  名： <el-input v-model="gmForm.username" style="width: 300px"/>
                    </el-form-item>
                    <el-form-item>
                        手机号：<el-input v-model="gmForm.telephone" style="width: 300px"/>
                    </el-form-item>
                    <div style="margin-left: 200px">
                        <el-button @click="create" >购买</el-button>
                        <el-button @click="gm = false">取消</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </el-container>
    </div>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue'
import router from '../../router/index.js'
import {onMounted, ref,reactive,toRaw} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";
import orderApi from "../../api/order.js"
import cartApi from '../../api/cart.js'
import axios from 'axios'

onMounted(()=>{
    queryByUid()
})
const route = useRoute()
let uid = route.query.uid
console.log(uid)
const sl = ref()
const carts = ref([])
const queryByUid = async() =>{
    const res = await cartApi.queryByUid({uid:uid})
    console.log(uid)
    carts.value = res.data
}
const gmd = ref(false)
const gm = async(cartid) =>{
    gmd.value = true
    const res = await cartApi.queryById({cartid:cartid})
    console.log(res.data)
    gmForm.uid = res.data.uid
    gmForm.pid = res.data.pid
    gmForm.price = res.data.price
}

const gmForm = reactive({
    uid:'',
    pid:'',
    price:'',
    number:'',
    total:''
})

const sum =async () =>{
    gmForm.number = sl.value
    gmForm.total = gmForm.price * gmForm.number
}

const create =async() =>{
    gm.value = false
    const res = await orderApi.create(gmForm)
    if (res.data) {
        ElMessage.success('添加成功');
    } else {
        ElMessage.error('添加失败');
    }
}

const removeById = (cartid) =>{
        axios.delete('http://127.0.0.1:8080/cart/removeById', {data: {cartid: cartid}}).then(res => {
            if (res.data) {
                ElMessage.success("移出成功")
                queryByUid();
            } else {
                ElMessage.error("移出失败")
            }
        })
}

</script>

<style scoped>
.common-layout {
    width: 100%;
    margin: auto;
    height: 1000px;
}
.common-layout{
    cursor: pointer;
}
.header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    width: 100%;
}
.main{
    width: 80%;
    margin-left: 135px;
    padding-top: 10px;
}
.el-container {
    -ebkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.el-icon {
    color: orangered;
}
.icon {
    display: inline-block;
    vertical-align: middle; /*垂直方向居中对齐*/
}
.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}
.el-dropdown-link
{
    float: right;
    padding-top: 22px;
    padding-right: 20px;
    color: white;
}
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.title
{
    padding: 8px 10px;
    font-weight: bold;
}
hr {
    width: 160px;
    height: 1px;
    margin: 8px auto;
    color: #ffffee;
    border: 0;
    border-top: 1px #ddd solid;
}
.left{
    float: left;
    height: 170px;
    margin-left: 20px;
}
.right {
    float: right;
    width: 700px;
    margin-left: 100px;
}
.cart-picture{
    height: 150px;
    width: 150px;
}
</style>